<template>
  <div id="app" style="width: 700px;">
    <Table border :columns="columns" :data="items"></Table>

    <p style="margin-top: 20px;" class="ivu-text-right">
      <Button type="primary" icon="md-add" @click="handleCreate">新增</Button>

    </p>
    <item-modal v-model='modal' @refreshList='findList' :data='selectData'/>
  </div>
</template>

<script>
import ItemModal from './components/item-modal'
import {defaultItems, list, remove} from '../../util/itemService'
export default {
  name: 'item-page',
  components: {ItemModal},
  data () {
    return {
      modal: false,
      selectData: {},
      columns: [
        {
          title: '名称',
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.name)
            ])
          }
        },
        {
          title: '权重',
          key: 'weight'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    // this.show(params.index)
                    this.modal = true
                    this.selectData = params.row
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      items: []
    }
  },
  created () {
    this.findList()
  },
  methods: {
    findList () {
      const itemList = list()
      if (!itemList || JSON.stringify(itemList) === '[]') {
        this.items = defaultItems
      } else {
        this.items = itemList
      }
    },
    remove (index) {
      let item = this.items[index]
      remove(item.name)
      this.findList()
    },
    handleCreate () {
      this.modal = true
      this.selectData = {weight: 10}
    }
  }
}
</script>
